<template>
  <view class="records">
    <view class="records-title">
      <image src="@/static/title/夺宝记录.png" mode="widthFix"></image>
    </view>
    <view class="records-category">
      <view v-for="(item,index) in categoryList" :key="item" :class="categoryVal === index?'active':''" @click="handleChangeCate(index)"><span>{{item}}</span></view>
    </view>
    
    <goods-list :list="list" type="records"></goods-list>
  </view>
</template>

<script>
  import GoodsList from '@/components/goods-list.vue'
  
  import {throttle,getUrlParam} from '@/utils/Tools.js'
  export default {
    components:{GoodsList},
    data() {
      return {
        list:[],
        categoryList:['参与记录','往期夺宝'],
        categoryVal:0
      };
    },
    onLoad() {
      this._getList()
      
      setTimeout(_=>{
        this.$point({
          action_code:"960000007",//对照表填 必须传
          action_type:"enter",//对照表填 必须传
          params: [{
            k: "active_id",  //必须传
            v: "jfdb",
          },
          {
            k: "user_phone", //必须传
            v: this.$mobile,
          },
          {
            k: "user_ip",  // 必须传
            v: this.$ip,
          }],
        })
      },2000)
    },
    methods:{
      handleChangeCate(e){  //   切换tab
        this.categoryVal = e
        this.list = []
        this._getList();
      },
      handleToHome(){  //   返回首页
        uni.reLaunch({
          url:'/pages/index/index'
        })
      },
      ///       network  
      async _getList(){   ///   请求列表数据
        const headers = {
          sign: this.$sign
        }
        uni.showLoading({
          title:'加载中...'
        })
        let url = this.categoryVal == 0?`/sessions/myLuckySession?userPhone=${this.$mobile}`:`/sessions/allLuckySession?userPhone=${this.$mobile}`;
        const res = await this.$get(url,'',1,headers)
        if(res.code == 200){
          this.list = res.data.myRecordList
        }
      }
    }
  }
</script>

<style lang="less" scoped>
.records{
  
  ::v-deep .goods-list{
    margin-top: 0;
  }
  .records-title{
    padding: 40rpx 30rpx 0;
    text-align: center;
    margin: 0 200rpx;
  }
  
  &-category{
    height: 50rpx;
    display: flex;
    justify-content: space-between;
    font-size: 30rpx;
    margin: 20rpx 0;
    color: #333;
    view{
      flex: 1;
      text-align: center;
      span{
        border-bottom: 1px solid transparent;
        padding-bottom: 6rpx;
      }
      &.active{
        color: #d6341e;
        font-weight: bold;
        span{
          border-color: #d6341e;
        }
      }
    }
  }  ///  &-category end
}
</style>
